<head>
  <meta charset="UTF-8">
  <title>画板</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-image: url('/jpg/bj.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      font-family: Arial, sans-serif;
    }

    h1 {
      font: 30px "华文琥珀";
      /*设置字体和字体大小*/
      margin: 20px auto;
      /*设置元素外边距*/
      font-weight: 400;
      /*设置字体粗细*/
      text-align: center;
      /*设置文字居中*/
      color: #f35626;
      /*设置文字颜色*/
      -webkit-animation: bounce 2s infinite;
      /*设置动画*/
    }


    @-webkit-keyframes bounce {

      /*创建动画*/
      0%,
      100%,
      20%,
      50%,
      80% {
        -webkit-transform: translateY(0);
      }

      40% {
        -webkit-transform: translateY(-30px);
      }

      60% {
        -webkit-transform: translateY(-15px);
      }
    }

    .canvas-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 20px;
      /* 修改此处的间距 */
    }

    .canvas {
      background-color: white;
      width: 800px;
      height: 500px;
      margin-bottom: 20px;
      border-radius: 10px;
      border: 5px solid #F08080;
    }

    @keyframes animated-border {
      0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
      }

      100% {
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
      }
    }

    #box {
      animation: animated-border 1.5s infinite;
      font-family: Arial;
      font-size: 18px;
      line-height: 30px;
      font-weight: bold;
      color: white;
      border-radius: 10px;
      padding: 15px;
    }

    .button-wrapper {
      display: flex;
      gap: 25px;
    }

    .button {
      display: inline-block;
      padding: 10px 20px;
      margin: 0;
      background-color: #f1c40f;
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
      text-shadow: -2px 2px 2px rgb(209 132 0), -2px 2px 2px rgb(209 132 0), -2px 2px 2px rgb(209 132 0),
        -2px 2px 2px rgb(209 132 0), -2px 2px 2px rgb(209 132 0), -2px 2px 2px rgb(209 132 0);
      box-shadow: 0px 15px 0px 0px #f39c12;
      transition: all .5s;
      font-size: 18px;
    }

    .button:hover {
      background-color: #fcdc5e;
    }

    .button:active {
      transform: translate(4px, 4px);
      box-shadow: 0px 1px 0px 0px #f39c12;
    }

    .input-wrapper {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 20px;
    }

    .input-wrapper label {
      color: #606060;
      font-weight: bold;
    }

    .input-wrapper select,
    .input-wrapper input[type="color"] {
      border: none;
      padding: 5px;
      border-radius: 5px;
    }

    .input-wrapper select {
      background-color: #f1c40f;
      color: #000000;
    }
  </style>
</head>

<body>
  <div class="canvas-wrapper" id="box">
    <h1>画画板</h1>
    <div class="input-wrapper">
      <label for="color">选择颜色：</label>
      <input type="color" id="color">
    </div>
    <div class="input-wrapper">
      <label for="line-width">选择线条粗细：</label>
      <select name="" id="line-width">
        <option value="1">--请选择线条粗细（像素）--</option>
        <option value="2">2px</option>
        <option value="5">5px</option>
        <option value="8">8px</option>
        <option value="12">12px</option>
        <option value="15">15px</option>
      </select>
    </div>
    <canvas class="canvas" id="canvas"></canvas>
    <div class="button-wrapper">
      <a class="button" id="saveToServerButton">保存云端</a>
      <a href="#" class="button">打开图片</a>
      <a class="button" id="undoButton">撤回</a>
      <a class="button" id="clearButton">清空</a>
      <a class="button" id="saveButton">保存本地</a>
    </div>
    <form id="saveForm" action="/mspaint_cgi" method="post">
      <input type="hidden" name="imageData" id="imageDataInput"></form>

  </div>
</body>

<script>
  const canvas = document.querySelector('#canvas');
  const ctx = canvas.getContext('2d');
  let isDrawing = false;
  const paths = []; // 保存路径的数据结构

  // 设置画布的宽度和高度
  const canvasWidth = 800;
  const canvasHeight = 500;
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;

  // 获取画笔颜色和宽度
  const color = document.querySelector('#color');
  const lineWidth = document.querySelector('#line-width');

  function startDrawing(e) {
    isDrawing = true;
    const offsetX = canvas.getBoundingClientRect().left;
    const offsetY = canvas.getBoundingClientRect().top;
    ctx.beginPath();
    ctx.moveTo(e.pageX - offsetX, e.pageY - offsetY);
    ctx.lineWidth = lineWidth.value;
    ctx.strokeStyle = color.value;
  }

  function draw(e) {
    if (!isDrawing) return;
    const offsetX = canvas.getBoundingClientRect().left;
    const offsetY = canvas.getBoundingClientRect().top;
    ctx.lineTo(e.pageX - offsetX, e.pageY - offsetY);
    ctx.stroke();
  }

  function stopDrawing() {
    if (isDrawing) {
      isDrawing = false;
      paths.push(ctx.getImageData(0, 0, canvas.width, canvas.height));
    }
  }

  function clearCanvas() {
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    paths.push(ctx.getImageData(0, 0, canvas.width, canvas.height));
  }

  function undo() {
    if (paths.length > 1) {
      paths.pop();
      ctx.putImageData(paths[paths.length - 1], 0, 0);
    } else if (paths.length === 1) {
      clearCanvas();
    }
  }

  function clearCanvas() {
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    paths.length = 0; // 清空路径数组
  }

  function saveCanvas() {
    let name = prompt("请输入要保存的图片名称", "canvas绘制图片");
    if (name === "") {
      alert("图片名字不能为空")
    } else {
      const dataURL = canvas.toDataURL();
      const link = document.createElement('a');
      link.href = dataURL;
      link.download = name; // 设置下载的文件名
      link.click();
    }
  }

  function saveCanvasToServer() {
    // 获取画板的引用
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    // 将画板内容转换为DataURL
    var dataUrl = canvas.toDataURL('image/png');

    // 将dataUrl以字符串形式返回
    // alert(dataUrl);

    // 将DataURL填充到隐藏的表单字段
    var imageDataInput = document.getElementById('imageDataInput');
    imageDataInput.value = dataUrl;

    // 提交表单到后端接口
    var saveForm = document.getElementById('saveForm');
    // saveForm.value = dataUrl;
    saveForm.submit();
  }

  canvas.addEventListener('mousedown', startDrawing);
  canvas.addEventListener('mousemove', draw);
  canvas.addEventListener('mouseup', stopDrawing);
  canvas.addEventListener('mouseout', stopDrawing);

  const undoButton = document.querySelector('#undoButton');
  undoButton.addEventListener('click', undo);

  const saveButton = document.querySelector('#saveButton');
  saveButton.addEventListener('click', saveCanvas);

  const clearButton = document.querySelector('#clearButton');
  clearButton.addEventListener('click', clearCanvas);

  const saveToServerButton = document.querySelector('#saveToServerButton');
  saveToServerButton.addEventListener('click', saveCanvasToServer);

</script>
<!-- // -->
<!-- <script>
  var stop, staticx;
  var img = new Image();
  img.src = "";

  function Sakura(x, y, s, r, fn) {
    this.x = x;
    this.y = y;
    this.s = s;
    this.r = r;
    this.fn = fn;
  }

  Sakura.prototype.draw = function (cxt) {
    cxt.save();
    var xc = 40 * this.s / 4;
    cxt.translate(this.x, this.y);
    cxt.rotate(this.r);
    cxt.drawImage(img, 0, 0, 40 * this.s, 40 * this.s)
    cxt.restore();
  }

  Sakura.prototype.update = function () {
    this.x = this.fn.x(this.x, this.y);
    this.y = this.fn.y(this.y, this.y);
    this.r = this.fn.r(this.r);
    if (this.x > window.innerWidth ||
      this.x < 0 ||
      this.y > window.innerHeight ||
      this.y < 0
    ) {
      this.r = getRandom('fnr');
      if (Math.random() > 0.4) {
        this.x = getRandom('x');
        this.y = 0;
        this.s = getRandom('s');
        this.r = getRandom('r');
      } else {
        this.x = window.innerWidth;
        this.y = getRandom('y');
        this.s = getRandom('s');
        this.r = getRandom('r');
      }
    }
  }

  SakuraList = function () {
    this.list = [];
  }
  SakuraList.prototype.push = function (sakura) {
    this.list.push(sakura);
  }
  SakuraList.prototype.update = function () {
    for (var i = 0, len = this.list.length; i < len; i++) {
      this.list[i].update();
    }
  }
  SakuraList.prototype.draw = function (cxt) {
    for (var i = 0, len = this.list.length; i < len; i++) {
      this.list[i].draw(cxt);
    }
  }
  SakuraList.prototype.get = function (i) {
    return this.list[i];
  }
  SakuraList.prototype.size = function () {
    return this.list.length;
  }

  function getRandom(option) {
    var ret, random;
    switch (option) {
      case 'x':
        ret = Math.random() * window.innerWidth;
        break;
      case 'y':
        ret = Math.random() * window.innerHeight;
        break;
      case 's':
        ret = Math.random();
        break;
      case 'r':
        ret = Math.random() * 6;
        break;
      case 'fnx':
        random = -0.5 + Math.random() * 1;
        ret = function (x, y) {
          return x + 0.5 * random - 1.7;
        };
        break;
      case 'fny':
        random = 1.5 + Math.random() * 0.7
        ret = function (x, y) {
          return y + random;
        };
        break;
      case 'fnr':
        random = Math.random() * 0.03;
        ret = function (r) {
          return r + random;
        };
        break;
    }
    return ret;
  }

  function startSakura() {

    requestAnimationFrame = window.requestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      window.oRequestAnimationFrame;
    var canvas = document.createElement('canvas'),
      cxt;
    staticx = true;
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
    canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;pointer-events: none;');
    canvas.setAttribute('id', 'canvas_sakura');
    document.getElementsByTagName('body')[0].appendChild(canvas);
    cxt = canvas.getContext('2d');
    var sakuraList = new SakuraList();
    for (var i = 0; i < 50; i++) {
      var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny;
      randomX = getRandom('x');
      randomY = getRandom('y');
      randomR = getRandom('r');
      randomS = getRandom('s');
      randomFnx = getRandom('fnx');
      randomFny = getRandom('fny');
      randomFnR = getRandom('fnr');
      sakura = new Sakura(randomX, randomY, randomS, randomR, {
        x: randomFnx,
        y: randomFny,
        r: randomFnR
      });
      sakura.draw(cxt);
      sakuraList.push(sakura);
    }
    stop = requestAnimationFrame(function () {
      cxt.clearRect(0, 0, canvas.width, canvas.height);
      sakuraList.update();
      sakuraList.draw(cxt);
      stop = requestAnimationFrame(arguments.callee);
    })
  }

  window.onresize = function () {
    var canvasSnow = document.getElementById('canvas_snow');
    canvasSnow.width = window.innerWidth;
    canvasSnow.height = window.innerHeight;
  }

  img.onload = function () {
    startSakura();
  }

  function stopp() {
    if (staticx) {
      var child = document.getElementById("canvas_sakura");
      child.parentNode.removeChild(child);
      window.cancelAnimationFrame(stop);
      staticx = false;
    } else {
      startSakura();
    }
  }
</script> -->
</body>

</html>